{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_macros.html" as macros %}
{% import "price/partial/prices_table.html" as price_table_macro %}
{% import "_my_wtf_macros.html" as my_wtf_macros %}


{% block title %}万屏时代报价工具--产品规格列表{% endblock %}

{% block modal %}
    <!--通知人数预览模态框-->
    <div class="modal fade" id="notice-preview-modal" tabindex="1" role="dialog"
         aria-labelledby="previewModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content clearfix">
            </div>
        </div>
    </div>
{% endblock %}

{% block panel_heading %}
    万屏时代报价工具--产品规格列表
    <div class="pull-right btn-group">
        <a href="{{ url_for('compute_bp.calculate_prices') }}"
           class="btn btn-xs btn-success"
           style="margin-right: 5px;" target="_self">
            重新计算
        </a>
    </div>
{% endblock %}

{% block panel_body %}
    <div class="text-info">{{ scene_type }} | {{ color }} | {{ spacing }}
        | {{ wide_high }} | {{ install_way }}
        <div class="pull-right">小计：<span>{{ '%.2f' % total }}</span>元
        </div>
    </div>
    {{ price_table_macro.gen_table(prices) }}
    <div class="pull-right text">总计：<span
            class="total-display">{{ '%.2f' % total }}</span>元
    </div>

    <form id="cal-condition-form" style="display: none"
          action="{{ url_for('compute_bp.calculate_prices') }}" method="post"
          class="form" role="form">

        <input id="product-data" name="products" value="{{ products }}">

        {{ my_wtf_macros.form_field(form.scene_type, div_col=8, label_col=2, field_col=10) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        {{ my_wtf_macros.form_field(form.color, div_col=8, label_col=2, field_col=10) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.spacing, div_col=8, label_col=2, field_col=10) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        {{ my_wtf_macros.form_field(form.wide, div_col=4, label_col=4, field_col=8) }}

        {{ my_wtf_macros.form_field(form.high, div_col=4, label_col=4, field_col=8) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        {{ my_wtf_macros.form_field(form.ground_high, div_col=8, label_col=2, field_col=10) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.install_way, div_col=8, label_col=2, field_col=10) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        {{ my_wtf_macros.form_field(form.assemble_way, div_col=8, label_col=2, field_col=10) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        {{ my_wtf_macros.form_field(form.transport, div_col=8, label_col=2, field_col=10) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        <input class="form-control" type="text" style="display:none" id="specs"
               , name="specs" value="">
        <div class="pull-left">
            <button type="submit" class="btn btn-success"
                    id="add-demand-btn">
                进行计算
            </button>
        </div>

    </form>

{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        $(document).ready(function () {
            $("#table-content").find("a[data-target='#notice-preview-modal']").click(function () {
                var $that = $(this);
                var modal_id = $that.attr('data-target');
                $(modal_id).find('.modal-content').eq(0).html("加载中");
                var scene_type = {{ form.scene_type.data }};
                var color = {{ form.color.data }};
                var spacing = {{ form.spacing.data }};
                var type_id = $that.data("type_id");
                var product_type_id = $that.data("product_type_id");
                var product_id = $that.data("product_id");

                $.ajax({
                    url: $that.data('href') + "?scene_type=" + scene_type +
                    "&color=" + color + "&spacing=" + spacing + "&type_id=" +
                    type_id + "&product_type_id=" + product_type_id +
                    "&product_id=" + product_id,
                    cache: false
                }).done(function (html) {
                    $(modal_id).find('.modal-content').eq(0).html(html);
                }).fail(function (jqXHR) {
                    $('<div/>', {
                        'class': 'alert alert-danger',
                        'role': 'alert',
                        text: function () {
                            var return_txt;
                            try {
                                var data = JSON.parse(jqXHR.responseText);
                                return_txt = data.data.msg;
                            } catch (e) {
                                return_txt = '出现网络问题，请刷新页面';
                            }
                            return return_txt;
                        }
                    }).prependTo($(self));
                })
            });

            $("#price-table-add").find(".is-add-price").change(
                function () {
                    var total_display = $(".total-display");
                    var total = parseFloat(total_display.first().html());

                    if ($(this).is(":checked")) {
                        total = total + parseFloat($(this).data('total'));
                    }
                    else {
                        total = total - parseFloat($(this).data('total'))
                    }
                    total_display.each(function () {
                        $(this).html(total.toFixed(2));
                    })
                }
            );
        });
    </script>
{% endblock %}